<template>
	<view>
		<view class="smart-page-head">
			<view class="smart-page-head-title"> text组件</view>
		</view>
		<view>
			<text class="font-s">nbsp根据字体设置空格大小\n</text>
			<text class="font-s">ensp中文字符空格一半大小\n</text>
			<text class="font-s">emsp中文字符空格大小\n</text>
			<text space="nbsp" class="text-spade yellow">A&nbsp;&nbsp;B C \n</text>
			<text space="ensp" class="text-spade yellow">A&nbsp;&ensp;B C \n</text>
			<text space="emsp" class="text-spade yellow">A&nbsp;&emsp;B C \n</text>
		</view>


		<view class="text-box">
			<text selectable="true">{{text}}</text>
		</view>
		<button type="primary" :disabled="!canAdd" @click="add">Add Line</button>
		<button type="warn" :disabled="!canRemove" @click="remove">Remove Line</button>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				texts: [
					'HTML',
					'CSS',
					'JavaScript',
					'DOM',
					'BOM',
					'JQuery',
					'AJAX',
					'VUE'
				],
				text: '',
				canAdd: true,
				canRemove: false,
				extraLine: []
			}
		},
		methods: {
			add: function(e) {
				this.extraLine.push(this.texts[this.extraLine.length % 12]);
				this.text = this.extraLine.join('\n');
				this.canAdd = this.extraLine.length < 12;
				this.canRemove = this.extraLine.length > 0;
			},
			remove: function(e) {
				if (this.extraLine.length > 0) {
					this.extraLine.pop();
					this.text = this.extraLine.join('\n');
					this.canAdd = this.extraLine.length > 0;
				}
			}
		},
	}
</script>

<style>
	.yellow {
		background-color: beige;
	}

	.font-s {
		font-size: 10rpx;
	}
</style>